---
title: Next.js (Pages)
description: Next.jsの`pages`ディレクトリにYamada UIをインストールして使用するためのガイド。
---

## インストール

::::steps

### アプリケーションを作成する

Next.jsのアプリケーションを作成します。

:::code-group

```bash [pnpm]
pnpm create next-app my-app --typescript
```

```bash [npm]
npx create-next-app my-app --typescript
```

```bash [yarn]
yarn create next-app my-app --typescript
```

```bash [bun]
bun create next-app my-app --typescript
```

:::

### セットアップする

コマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。

:::code-group

```bash [pnpm]
pnpm dlx @yamada-ui/cli init
```

```bash [npm]
npx @yamada-ui/cli init
```

```bash [yarn]
yarn dlx @yamada-ui/cli init
```

```bash [bun]
bunx @yamada-ui/cli init
```

:::

### パッケージをインストールする

アプリケーションに`@workspaces/ui`をインストールします。

:::code-group

```bash [pnpm]
pnpm add "@workspaces/ui@workspace:*"
```

```bash [npm]
npm install "@workspaces/ui@workspace:*"
```

```bash [yarn]
yarn add "@workspaces/ui@workspace:*"
```

```bash [bun]
bun add "@workspaces/ui@workspace:*"
```

:::

### プロバイダーを追加する

インストール後、アプリケーションのルートに`UIProvider`を追加します。

```tsx title="_app.tsx" {1,6,8}
import { UIProvider } from "@workspaces/ui"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  return (
    <UIProvider>
      <Component {...pageProps} />
    </UIProvider>
  )
}
```

### コンポーネントを使用する

`UIProvider`を追加したら、アプリケーション内でコンポーネントを使用します。

```tsx title="index.tsx" {1,4}
import { Button } from "@workspaces/ui"

export default function Home() {
  return <Button>Click me!</Button>
}
```

これで、Yamada UIのセットアップは完了です！

::::

## スクリプト

### ColorModeScript

[カラーモード](/docs/theming/color-mode)を使用する場合は、正常に動作させるために`body`に`ColorModeScript`を追加する必要があります。

理由は、カラーモードが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

::::steps

#### スクリプトを追加する

```tsx title="_document.tsx" {2,9}
import { Html, Head, Main, NextScript } from "next/document"
import { ColorModeScript } from "@workspaces/ui"

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <ColorModeScript type="cookie" />

        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

もし、[コンフィグ](/docs/theming/configuration/overview)の`defaultColorMode`を変更した場合は、`ColorModeScript`に`defaultValue`を設定します。

```tsx title="_document.tsx" {3,10}
import { Html, Head, Main, NextScript } from "next/document"
import { ColorModeScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <ColorModeScript type="cookie" defaultValue={config.defaultColorMode} />

        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

#### getServerSidePropsを追加する

複数のページで[getServerSideProps](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props)を共通化するために、`getServerSideSharedProps`を定義します。

```tsx title="get-server-side-props.ts"
import { GetServerSidePropsContext } from "next"

export const getServerSideSharedProps = ({
  req,
}: GetServerSidePropsContext) => {
  return {
    props: {
      cookies: req.headers.cookie ?? "",
    },
  }
}
```

```tsx title="index.tsx" {1,4}
import { getServerSideSharedProps } from "@/get-server-side-props"
import { Button } from "@workspaces/ui"

export const getServerSideProps = getServerSideSharedProps

export default function Home() {
  return <Button>Click me!</Button>
}
```

#### プロバイダーを更新する

```tsx title="_app.tsx" {5,8}
import { UIProvider } from "@workspaces/ui"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  const { cookie } = pageProps

  return (
    <UIProvider cookie={cookie}>
      <Component {...pageProps} />
    </UIProvider>
  )
}
```

::::

### ThemeSchemeScript

[テーマの切り替え](/docs/theming/switching-themes)を使用する場合は、正常に動作させるために`body`に`ThemeSchemeScript`を追加する必要があります。

理由は、テーマの切り替えが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

::::steps

#### スクリプトを追加する

```tsx title="_document.tsx" {2,9}
import { Html, Head, Main, NextScript } from "next/document"
import { ThemeSchemeScript } from "@workspaces/ui"

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <ThemeSchemeScript type="cookie" />

        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

もし、[コンフィグ](/docs/theming/configuration/overview)の`defaultThemeScheme`を変更した場合は、`ThemeSchemeScript`に`defaultValue`を設定します。

```tsx title="_document.tsx" {3,12}
import { Html, Head, Main, NextScript } from "next/document"
import { ThemeSchemeScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <ThemeSchemeScript
          type="cookie"
          defaultValue={config.defaultColorMode}
        />

        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
```

#### getServerSidePropsを追加する

複数のページで[getServerSideProps](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props)を共通化するために、`getServerSideSharedProps`を定義します。

```tsx title="get-server-side-props.ts"
import { GetServerSidePropsContext } from "next"

export const getServerSideSharedProps = ({
  req,
}: GetServerSidePropsContext) => {
  return {
    props: {
      cookies: req.headers.cookie ?? "",
    },
  }
}
```

```tsx title="index.tsx" {1,4}
import { getServerSideSharedProps } from "@/get-server-side-props"
import { Button } from "@workspaces/ui"

export const getServerSideProps = getServerSideSharedProps

export default function Home() {
  return <Button>Click me!</Button>
}
```

#### プロバイダーを更新する

```tsx title="_app.tsx" {5,8}
import { UIProvider } from "@workspaces/ui"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  const { cookie } = pageProps

  return (
    <UIProvider cookie={cookie}>
      <Component {...pageProps} />
    </UIProvider>
  )
}
```

::::
